<template>
  <a-modal title="添加线索" @ok="handleOk" :visible="visible" @cancel="handleCancel" :width="900">

    <div class="mb-10 " v-if="tableList.length>1"
         style="margin-bottom: 15px;display: flex;align-items: center">
      <span>已选择</span>
      <span class="text-blue ml-5 mr-5">{{ tableList.length }}</span>
      <span>家公司</span>
      <div v-if="filterNum!=0">
        <span class="">，并为您过滤 </span>
        <span class="ml-5 mr-5 text-blue"> {{ filterNum }} </span>
        <span class=""> 条信息，过滤原因：暂未查询到联系方式</span>
      </div>
    </div>
    <div style="max-height: 300px;overflow:auto;">
      <a-table :columns="columns" :data-source="tableList" :pagination="false">
        <template #bodyCell="{column,record,index}">
          <template v-if="column.key=='action'">
            <a-button type="text" danger @click="removeItem(index)">移除</a-button>
          </template>
        </template>
      </a-table>
    </div>
    <div class="mt-20">指定跟进人员</div>
    <a-radio-group
        class="mt-10"
        v-model:value="modelRef.operate_type"
        size="small"
    >
      <a-radio :value="1"
      ><span style="font-size: 12px">指定人员</span></a-radio
      >
      <a-radio :value="2"
      ><span style="font-size: 12px">加入公海</span></a-radio
      >
      <a-radio :value="3"
      ><span style="font-size: 12px">平均分配</span></a-radio
      >
      <a-radio :value="4"
      ><span style="font-size: 12px"
      >分配给创建人</span
      ></a-radio
      >
    </a-radio-group>
    <template v-if="modelRef.operate_type == 1" class="mt-10">
      <a-cascader
          style="width: 100%;margin-top: 10px"
          v-model:value="modelRef.user_id"
          :options="groupOptions"
          :load-data="getTeamList"
          placeholder="选择分配人员"
      />
    </template>

  </a-modal>
</template>

<script>
import {toRefs, watch, reactive, ref} from 'vue'
import request from '@/common/utils/request'
import {message} from "ant-design-vue"
import _ from "lodash"

export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => ([])
    },
    filterNum: {
      type: Number,
      default: 0
    }
  },
  setup(props, context) {
    const state = reactive({
      tableList: [],
      columns: [
        {
          title: "公司名称",
          key: "name",
          dataIndex: "name",
        },
        {
          title: "联系电话",
          key: "contactInformation",
          dataIndex: "contactInformation",
        },
        {
          title: "统一社会信用代码",
          key: "creditCode",
          dataIndex: "creditCode",
        },
        {
          title: "法人",
          key: "legalPersonName",
          dataIndex: "legalPersonName",
        },
        {
          title: "地区",
          key: "base",
          dataIndex: "base",
        }]
    })

    const modelRef = reactive({
      operate_type: 1,
      user_id: 0,
    })


    const groupOptions = ref([])
    const getSub = (val) => {
      request.get("/org", "/business/customerTeam/teamUserIndex", {team_id: val.id}).then(res => {
        console.log(res)
        val.children = res.data.map(item => {
          return {
            label: item.name,
            value: item.uid
          }
        })
        groupOptions.value = [...groupOptions.value];
      });
    }
    const getGroupList = () => {
      request.post("/org", "/business/customerTeam/list").then(res => {
        // console.log(res)
        groupOptions.value = res.list.map(item => {
          return {
            label: item.name,
            value: item.id,
            isLeaf: false,
          }
        })

        // if (props.editId) {
        //   groupOptions.value.forEach((item) => {
        //     getSub(item)
        //   })
        // }

      })
    }

    const getTeamList = (selectedOptions) => {
      const targetOption = selectedOptions[selectedOptions.length - 1];
      targetOption.loading = true;
      // console.log(targetOption)
      request.get("/org", "/business/customerTeam/teamUserIndex", {team_id: targetOption.value}).then(res => {
        console.log(res)
        targetOption.loading = false;
        targetOption.children = [];
        targetOption.children = res.data.map(item => {
          return {
            label: item.name,
            value: item.uid
          }
        })
        groupOptions.value = [...groupOptions.value];
      });
    }


    const init = () => {
      getGroupList()
      state.tableList = _.cloneDeep(props.list)
      if (state.tableList.length > 1) {
        state.columns = [
          {
            title: "公司名称",
            key: "name",
            dataIndex: "name",
          },
          {
            title: "联系电话",
            key: "contactInformation",
            dataIndex: "contactInformation",
          },
          {
            title: "统一社会信用代码",
            key: "creditCode",
            dataIndex: "creditCode",
          },
          {
            title: "法人",
            key: "legalPersonName",
            dataIndex: "legalPersonName",
          },
          {
            title: "地区",
            key: "base",
            dataIndex: "base",
          },
          {
            title: "操作",
            key: "action",
            dataIndex: "action",
            align: "center"
          }]

      }
    }
    const handleOk = () => {

      if (state.tableList.length == 0) {
        message.error("未选择公司！")
        return
      }
      if (modelRef.operate_type == 1 && !modelRef.user_id) {
        message.error("请选择分配人员！")
        return
      }

      const params = {
        clueData: props.list,
        ...modelRef,
      }
      if (modelRef.operate_type == 1) {
        params.user_id = modelRef.user_id[1]
      } else {
        params.user_id = 0;
      }
      console.log(params)
      request.post("/org", "/business/clue/addClueByData", params).then(res => {

        message.success("添加成功")

        context.emit("success")
      })

    }

    const handleCancel = () => {
      context.emit("cancel")
    }
    watch(() => props.visible, (value) => {
      if (value) {
        init()
      } else {
        modelRef.user_id = []
      }
    })

    const removeItem = (index) => {
      state.tableList.splice(index, 1)
    }


    return {
      ...toRefs(state),
      handleOk,
      handleCancel,
      getTeamList,
      modelRef,
      groupOptions,
      removeItem,

    }
  }
}
</script>

<style lang="less" scoped>

</style>